<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <style>
        .img {
            width: 300px;
            height: 300px;
        }

        .static {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            color: blue;
        }

        .a {
            background: fuchsia;
        }

        .b {
            border-radius: 50%;
        }

        .c {
            border: 5px solid yellowgreen;
        }

        .img {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 1s;
        }

        .v-enter {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .v-enter-to {
            opacity: 1;
            width: 300px;
            height: 300px;
        }

        .v-leave {
            opacity: 1;
            width: 300px;
            height: 300px;
        }

        .v-leave-to {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .fade-enter {
            opacity: 0;
            transform: scale(0);
        }

        .fade-enter-to {
            opacity: 1;
            transform: scale(1);
        }

        .fade-leave {
            opacity: 1;
            transform: scale(1);
        }

        .fade-leave-to {
            opacity: 0;
            transform: scale(0);
        }

        @keyframes slide-in{
            from{
                opacity: 0;
                transform: translateX(-300%);
            }
            50%{
                opacity: 0.5;
                transform: translateX(300%);
            }
            to{
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes slide-out{
            0%{
                opacity: 1;
                transform: translateX(0);
            }
            50%{
                opacity: 0.5;
                transform: translateX(300%);
            }
            100%{
                opacity: 0;
                transform: translateX(-300%);
            }
        }
        .slide-enter-active{
            animation: slide-in 1s both;
        }
        .slide-leave-active{
            animation: slide-out 1s both;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s both;
        }
        .zoom-leave-active{
            animation: zoomInDown 1s both;
        }
        .rotate-enter-active{
            animation: lightSpeedOutRight 1s;
        }
        .rotate-leave-active{
            animation: lightSpeedOutRight 1s;
        }
        .moveIn{
            animation: fadeInTopLeft 1s;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{ title }}</h2>
        <div>
            <transition name="v" appear appear-active-class="moveIn">
                <img v-show="show" :src="link" class="img" alt="">
            </transition>

            <button @click="show=!show">点击切换</button>
        </div>

        <div>
            <transition name="fade" appear appear-active-class="moveIn">
                <img v-show="show1" :src="link" class="img" alt="">
            </transition>

            <button @click="show1=!show1">点击切换1</button>
        </div>

        <div>
            <transition name="slide" appear appear-active-class="moveIn">
                <img v-show="show2" :src="link" class="img" alt="">
            </transition>

            <button @click="show2=!show2">点击切换2</button>
        </div>

        <div>
            <transition name="zoom" appear appear-active-class="moveIn" mode="in-out">
                <img v-show="show3" :src="link" class="img" alt="">
            </transition>

            <button @click="show3=!show3">点击切换3</button>
        </div>

        <div>
            <transition name="rotate" appear appear-active-class="moveIn" mode="out-in">
                <img v-show="show4" :src="link" class="img" alt="">
            </transition>

            <button @click="show4=!show4">点击切换4</button>
        </div>
    </div>
    <script>
        const vm = new Vue({
            // el:"#app"
            data: {  // 简单数据
                title: 'Vue transition 过渡动画   ',
                link: "https://img1.baidu.com/it/u=3809141154,678022494&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706720400&t=206fc1aef98cd6bfb0ef434735ccd582",
                show: true,
                show1: true,
                show2: true,
                show3: true,
                show4: true,
            },
            mounted() {
                // 真实DOM
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            },
        }).$mount("#app")    
    </script>
    <!-- 
        Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

        条件渲染 (使用 v-if)
        条件展示 (使用 v-show)
        动态组件
        组件根节点

        在进入/离开的过渡中 会有 6 个 class 切换
        v-enter：定义进入过渡的开始状态 
        v-enter-active：定义进入过渡生效时的状态  （动画)
        v-enter-to：2.1.8 版及以上定义进入过渡的结束状态


        v-leave：定义离开过渡的开始状态
        v-leave-active：定义离开过渡生效时的状态    （动画)
        v-leave-to：2.1.8 版及以上定义离开过渡的结束状态 


        appear 初始化渲染
        appear-class  
        appear-to-class  过渡

        appear-active-class 动画


        transition 单个元素过渡

        transition-group 多个列表元素过渡 
     -->
</body>

</html>